<template>
	<div class="jk-card" :style="cardStyle">
		<div v-if="showHeader" class="jk-header" :style="headerStyle">
			<slot name="header"></slot>
		</div>
		<div class="jk-card-content" :style="bodyStyle">
			<slot>
			</slot>
		</div>
	</div>
</template>
<script>
    export default {
        name: 'JkCard',
        props: {
            showHeader: {
                type: Boolean,
                default: false
            },
            headerStyle: {
                type: Object,
                default() {
                    return {
                        background: '#e8eaec'
                    };
                }
            },
            cardStyle: {
                type: Object,
                default() {
                    return {};
                }
            },
            bodyStyle: {
                type: Object,
                default() {
                    return {
                        height: '100%',
                        padding: '16px'
                    };
                }
            }
        }
    };
</script>
<style scoped lang="scss">
    .jk-card {
        height: 100%;
        //box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border-radius: 8px;
        border: 1px solid #e6ebf5;
        background: #fff;
        overflow: hidden;
        .jk-header {
            width: 100%;
            height: 42px;
            padding: 0 16px;
            display: flex;
            align-items: center;
        }
        .jk-card-content {
        }
    }
    .jk-card:hover {
        box-shadow: 0 0 10px 2px #eee;
        transition: all .5s;
    }
</style>
